<template>
  <div id="userInfo" @click.stop="switchShowMes">
    <el-avatar :size="30" :src="baseURL + userInfo.avatar" />
    <div class="name">{{ userInfo.name }}</div>
    <!-- 下拉列表 -->
    <div
      class="pulldown"
      v-show="isShowMes"
      :style="{
        backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)'
      }"
    >
      <div class="nav" @click="handleJump('/admin/personal')">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ba633cb8=""
        >
          <path
            fill="currentColor"
            d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0z"
          ></path>
        </svg>
        个人中心
      </div>
      <div class="nav" @click="handleJump('/admin/altPass')">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ba633cb8=""
        >
          <path
            d="m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696L175.168 732.8zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336L104.32 708.8zm384 254.272v-64h448v64h-448z"
            fill="currentColor"
          ></path>
        </svg>
        修改密码
      </div>
      <div class="nav" @click="handleJump('/admin/message')">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ba633cb8=""
        >
          <path
            fill="currentColor"
            d="M128 224v512a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V224H128zm0-64h768a64 64 0 0 1 64 64v512a128 128 0 0 1-128 128H192A128 128 0 0 1 64 736V224a64 64 0 0 1 64-64z"
          ></path>
          <path
            fill="currentColor"
            d="M904 224 656.512 506.88a192 192 0 0 1-289.024 0L120 224h784zm-698.944 0 210.56 240.704a128 128 0 0 0 192.704 0L818.944 224H205.056z"
          ></path>
        </svg>
        我的消息
      </div>
      <div class="nav" @click="exitLogin">
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ba633cb8=""
        >
          <path
            fill="currentColor"
            d="M352 159.872V230.4a352 352 0 1 0 320 0v-70.528A416.128 416.128 0 0 1 512 960a416 416 0 0 1-160-800.128z"
          ></path>
          <path
            fill="currentColor"
            d="M512 64q32 0 32 32v320q0 32-32 32t-32-32V96q0-32 32-32z"
          ></path>
        </svg>
        安全退出
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { baseURL } from '@/utils/axios'
import { ElMessageBox, ElMessage } from 'element-plus'
import cache, { CacheType } from '@/utils/cache'

const store = useStore()
const router = useRouter()

const userInfo = computed(() => store.state.userInfo)

// 是否显示个人中心信息
const isShowMes = ref<boolean>(false)

// 切换显示
const switchShowMes = () => {
  isShowMes.value = !isShowMes.value
}

// 当前背景主题
const bgcColor = computed(() => store.state.Background)

// 页面跳转
const handleJump = (path: string) => {
  router.push(path)
}

// 退出登录
const exitLogin = () => {
  ElMessageBox.confirm(
    '安全退出将会清空本地保存的个人数据，是否继续？',
    '提示',
    {
      confirmButtonText: '继续',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      // 清空token
      cache.removeItem('token', CacheType.session)
      // 清空local个人数据
      cache.removeItem('shrink')
      cache.removeItem('bgcColor')
      // 清空vuex
      store.commit('clearUserInfo')
      router.replace('/login')
      ElMessage({
        type: 'success',
        message: '已安全退出登录'
      })
    })
    .catch(() => {
      console.log()
    })
}

onMounted(() => {
  document.addEventListener(
    'click',
    () => {
      isShowMes.value = false
    },
    false
  )
})
</script>

<style scoped lang="less">
#userInfo {
  width: 120px;
  display: flex;
  font-size: 12px;
  align-items: center;
  cursor: pointer;
  position: relative;
  user-select: none;
  .name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 10px;
  }
  .pulldown {
    position: absolute;
    z-index: 1200;
    top: 40px;
    width: 120px;
    text-align: center;
    box-shadow: 0px 0px 6px rgb(148, 145, 145);
    padding: 6px 0;
    box-sizing: border-box;
    user-select: none;
    .nav {
      width: 120px;
      height: 30px;
      line-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      &:hover {
        background-color: rgb(245, 108, 108);
      }
      svg {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }
  }
}
</style>
